<template>
	<view class="big-text" :class="{ 'show-tips': showTip }">
		<view v-if="content" style="padding-left: 12rpx;font-size:18rpx;">{{ content }}</view>
		<view v-if="content" style="margin: 0 12rpx;border-right: solid 2rpx #82807b;height: 18rpx;"></view>
		<input
			class="text"
			:value="getValue"
			@focus="focus = true"
			@blur="focus = false"
			:style="{ width: width + 'rpx' }"
			:maxlength="maxLength"
			@input="handler"
			:placeholder="placeholder"
			:disabled="disabled"
		/>

		<view id="textView" class="text view">{{ getValue }}</view>
		<view v-if="showTip" class="tips" :class="{ show: showTip && focus }">
			<text class="current">{{ getCurrent }}</text>
			<text>/</text>
			<text class="total">{{ getTotal }}</text>
		</view>
		<view v-if="disabled" class="mask"></view>
	</view>
</template>

<script>
export default {
	props: {
		value: { type: String, default: '' },
		placeholder: { type: String, default: '请输入' },
		content: { type: String, default: '' },
		maxLength: { type: Number, default: 20 },
		showTip: { type: Boolean, default: true },
		disabled: { type: Boolean, default: false }
	},
	data() {
		const info = uni.getSystemInfoSync();
		return {
			ratio: 750 / info.windowWidth,
			// #ifdef H5
			width: 86,
			// #endif
			// #ifdef MP-WEIXIN
			width: 60,
			// #endif
			focus: false
		};
	},
	watch: {
		value(val) {
			if (val) {
				this.calcWidth();
			}
		}
	},
	mounted() {
		const query = uni.createSelectorQuery().in(this);
		this.textView = query.select('#textView');
		this.calcWidth();
	},
	computed: {
		getValue() {
			return this.value;
		},
		getTotal() {
			return this.maxLength;
		},
		getCurrent() {
			return this.value.length;
		}
	},
	methods: {
		calcWidth() {
			setTimeout(() => {
				this.textView
					.boundingClientRect(data => {
						// #ifdef MP-WEIXIN
						let width = data.width * this.ratio;
						this.width = width < 46 ? 46 : width;
						// #endif
					})
					.exec();
			}, 0);
		},
		handler(e) {
			this.$emit('input', e.detail.value);
		}
	}
};
</script>

<style lang="less" scoped>
input:disabled {
	opacity: 1 !important;
}
.big-text {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	.mask {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1;
	}
	.text {
		position: relative;
		display: inline-block;
		font-size: 18rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: left;
		width: auto;
		// padding-right: 20rpx;
		margin-right: -20rpx;
		font-weight: 300;
		min-height: max-content;
	}
	/deep/.uni-input-input {
		height: auto;
	}
	.view {
		position: absolute;
		font-weight: 300;
		z-index: -1;
	}
	.tips {
		text-align: right;
		font-size: 22rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-right: 8rpx;
		color: #a1a1a1;
		position: absolute;
		bottom: 0;
		right: 10rpx;
		display: none;
		.current {
			margin-right: 4rpx;
		}
		.total {
			margin-left: 4rpx;
			font-weight: 500;
		}
		&.show {
			display: block;
		}
	}
}
</style>
